<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu router :default-openeds="indexs" unique-opend :default-active="$router.path">
        <el-submenu :index="`${index+1}`" v-for="(items,index) in meunData" :key="index">
          <template slot="title">
            <i class="el-icon-message"></i>
            {{items.title}}
          </template>
          <el-menu-item-group v-for="(item,ind) in items.list" :key="ind">
            <template slot="title">{{item.title}}</template>
            <el-menu-item v-for="(it,i) in item.item" :key="i" :index="it.url">{{it.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="this.Logout()">修改密码</el-dropdown-item>
            <el-dropdown-item command="this.Logout()">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{userName}}</span>
        <!-- <span>{{this.sessionStorage.getItem('userInfo')}}</span> -->
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      indexs: ["1"],
      userName: "",
      meunData: [
        {
          title: "发布信息",
          list: [
            {
              title: "短信模板",
              item: [
                {
                  name: "新增模板",
                  url: "/noteMode/index"
                },
                {
                  name: "模板列表",
                  url: "/noteMode/list"
                }
              ]
            },
            {
              title: "短信管理",
              item: [
                {
                  name: "短信发布",
                  url: "/app/index"
                },
                {
                  name: "发布统计",
                  url: "/app/list"
                }
              ]
            },
            // {
            //   title: "静态网站发布",
            //   item: [
            //     {
            //       name: "网站上传",
            //       url: "/web/index"
            //     },
            //     {
            //       name: "网站查询",
            //       url: "/web/list"
            //     }
            //   ]
            // },
          ]
        },
        {
          title: "账号管理",
          list: [
            {
              title: "账号",
              item: [
                {
                  name: "新增账号",
                  url: "/User/UserNew"
                },
                {
                  name: "账号列表",
                  url: "/User/UserList"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleCommand(e) {
      eval(e);
    },
    Logout() {
      // this.$store.commit('clearToken')
      sessionStorage.clear();
      // console.log(this.meunData[0].list[0].item[0].url)
      // this.$router.push(this.meunData[0].list[0].item[0].url)
      this.$router.push("/Login");
    }
  },
  created() {
    this.userName = JSON.parse(sessionStorage.getItem("userInfo")).name;
    this.$router.push(this.meunData[0].list[0].item[0].url)
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
